<?php
/**
 * Created by PhpStorm.
 * User: zuoa
 * Date: 2016/11/21 0021
 * Time: 10:06
 */
defined('BASEPATH') OR exit('No direct script access allowed');

?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title>事故实时可视化展示</title>


    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=BIMkrVrXh34doklbzbUpxEpZvb7zNOtS"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>


    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html {
            width: 100%;
            height: 100%;
            font-size: 12px;
        }

        ul li {
            list-style: none;
            margin-top: 8px;
        }

        #map_container {
            width: 100%;
        }

        #toolbox {
            position: absolute;
            right: 0;
            top: 0;
        }

        #search_group {
            padding: 8px;
            background-color: #EEE;
        }

        #search_group input {
            width: 180px;
            background-color: #ffffff;
            border: none;
            font-size: 18px;
            padding: 4px;
        }

        #search_group button {
            padding: 4px;
            margin-top: -4px;
        }

        #div_records {
            position: absolute;
            right: 0;
            top: 0;
            background: #FCFCFC;
            border-left: 1px solid #CCC;
            width: 320px;
            height: 100%;
            overflow: auto;
        }

        .checkbox {
            position: absolute;
            right: 0;
            bottom: 0;
            padding: 16px;
            font-size: 10px;
            background-color: #EEE;
            border-left: 1px solid #CCC;
            width: 288px;
        }

        .record-item {
            background-color: #FCFCFC;
            border-bottom: 1px solid #F0F0F0;
            padding: 8px;
            margin-left: 16px;
            border-left: 4px solid #0d6aad;
        }

        .record-item:hover {
            background-color: #F6F6F6;
        }

        .record-item h1 {
            font-size: 20px;
            margin-bottom: 8px;
            color: #0d6aad;
        }

        .record-item p {
            color: #595959;
            margin-left: 4px;
        }

    </style>


</head>
<body>
<div id="map_container"></div>


<div id="toolbox">

    <div id="div_records">
        <div id="search_group">
            <input id="input_accident_id" type="text" placeholder="输入事故单号查询">
            <button id="btn_query">查询</button>
            <button id="btn_live">实时</button>
        </div>

        <ul id="ul_records">
        </ul>
    </div>
    <div id="div_checkbox" class="checkbox">
        <div>
            <label>
                <input type="checkbox" id="cb_moving" checked> 自动移动到最新记录
            </label>
        </div>
        <div>
            <label>
                <input type="checkbox" id="cb_show_heatmap"> 显示近期热力图
            </label>
        </div>
    </div>
</div>
</body>

<script src="http://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
<script>
    var icon = new BMap.Icon("/static/image/accident.png", new BMap.Size(40, 40));
    $("#map_container").height(window.innerHeight);
    $("#map_container").width(window.innerWidth - 320);
    $("#div_records").height(window.innerHeight - $("#div_checkbox").outerHeight());
    $("#toolbox").height(window.innerHeight);
    var map = new BMap.Map("map_container");          // 创建地图实例
    map.addControl(new BMap.NavigationControl({
        "anchor": BMAP_ANCHOR_BOTTOM_RIGHT,
        "type": BMAP_NAVIGATION_CONTROL_ZOOM
    }));
    map.enableScrollWheelZoom();
    var point = new BMap.Point(120.314083, 30.420003);  // 创建点坐标
    map.centerAndZoom(point, 20);        // 初始化地图，设置中心点坐标和地图级别

    var accident_map = {};
    var marker_map = {};
    var infoWindow_map = {};
    var is_searching = false;


    function showInfoWindow(id) {
        if (marker_map[id] == undefined) {
            return;
        }
        var marker = marker_map[id];
        if (infoWindow_map[id] != undefined) {
            marker.openInfoWindow(infoWindow_map[id]);
        }

        if (accident_map[id] != undefined) {
            map.setCenter(new BMap.Point(accident_map[id]["lng"], accident_map[id]["lat"]))
        }
    }

    var add2List = function (r) {
        var type_text;
        if (r["type"] == 0){
            type_text = "简易事故";
        }
        else {
            type_text = "一般事故"
        }

        var html_li = '<li class="record-item" onclick="showInfoWindow(' + r["id"] + ')">' +
            '<h1>' + r["related_info"] + '</h1>' +
            '<p>' + type_text + '</p>' +
            '<p>' + r["department"] + ' ' + r["name"] + '</p>' +
            '<p>' + r["ts"] + '</p>' +
            '<span style="display: none">' + r["lng"] + ',' + r["lat"] + '</span>' +
            '</li>';

        var appended = html_li + $("#ul_records").html();
        $("#ul_records").html(appended)
    };

    var addMarker = function (record) {
        if (accident_map[record["id"]] != undefined) {
            return;
        }
        var type_text;
        var infowindow_title;
        if (record["type"] == 0){
            type_text = "简易事故";
            infowindow_title = "<h3>" + type_text + record["related_info"] + "  <a href='/record/detail/" + record["related_info"] + "' target='_blank'><span>详情</span></a></h3>";
        }
        else {
            type_text = "一般事故"
            infowindow_title = "<h3>" + type_text + record["related_info"] + "</h3>";
        }

        var marker = new BMap.Marker(new BMap.Point(record["lng"], record["lat"]), {icon: icon});
        var label = new BMap.Label(record["related_info"], {offset: new BMap.Size(35, 5)});
        marker.setLabel(label);

        map.addOverlay(marker);
        var opts = {
            width: 60,     // 信息窗口宽度
            height: 40,     // 信息窗口高度
            title:infowindow_title
        }
        var infoWindow = new BMap.InfoWindow(record["department"] + " " + record["name"] + "<br/>" + record["ts"], opts);  // 创建信息窗口对象


        infoWindow_map[record["id"]] = infoWindow;
        marker_map[record["id"]] = marker;
        accident_map[record["id"]] = record;

        marker.addEventListener("click", function () {
            marker.openInfoWindow(infoWindow);
        });
        add2List(record);
    }

    function removeAllMarker() {
        map.clearOverlays();
        accident_map = {};
        marker_map = {};
        infoWindow_map = {};
        $("#ul_records").html('');
    }


    $("#btn_query").click(function () {
        is_searching = true;

        $.get("/record/like/" + $("#input_accident_id").val(), function (data) {
            removeAllMarker();
            var records = JSON.parse(data);

            for (var i = 0; i < records.length; i++) {
                var record = records[i];

                addMarker(record);
            }
        });
    });

    $("#btn_live").click(function () {
        $("#input_accident_id").val("")
        removeAllMarker();
        is_searching = false;
        getRecords();
    });

    var getTodayRecords = function () {
        if (is_searching) {
            return;
        }

        $.get("/record/today", function (data) {

            if (is_searching) {
                return;
            }

            var records = JSON.parse(data);
            if (records && records.length > 0 && $("#cb_moving").prop('checked')) {
                map.setCenter(new BMap.Point(records[0]["lng"], records[0]["lat"]));
            }

            var records_reverse = records.reverse();
            for (var i = 0; i < records_reverse.length; i++) {
                var record = records_reverse[i];
                addMarker(record);
            }
        })
    };


    var getLiveRecords = function () {
        if (is_searching) {
            return;
        }

        $.get("/record/latest/10", function (data) {

            if (is_searching) {
                return;
            }

            var records = JSON.parse(data);
            if (records && records.length > 0 && $("#cb_moving").prop('checked')) {
                map.setCenter(new BMap.Point(records[0]["lng"], records[0]["lat"]));
            }

            var records_reverse = records.reverse();
            for (var i = 0; i < records_reverse.length; i++) {
                var record = records_reverse[i];
                addMarker(record);
            }
        })
    };

    getTodayRecords();

    setInterval(getLiveRecords, 5000);


    var heatmapOverlay = undefined;
    function showHeatmap() {
        if (heatmapOverlay == undefined) {
            $.get("/record/heatmap/10000", function (data) {
                var records = JSON.parse(data);
                var points = [];
                for (var i = 0; i < records.length; i++) {
                    var record = records[i];
                    points.push({"lng": parseFloat(record["lng"]), "lat": parseFloat(record["lat"]), "count": 10}); //10是为了看的见
                }

                heatmapOverlay = new BMapLib.HeatmapOverlay({"radius": 25});
                map.addOverlay(heatmapOverlay);
                heatmapOverlay.setDataSet({data: points, max: 100});
            })
        }
        else {
            heatmapOverlay.show();
        }
    }

    function hideHeatmap() {
        if (heatmapOverlay != undefined) {
            heatmapOverlay.hide();
        }
    }

    //showHeatmap();

    $("#cb_show_heatmap").change(function () {
        if (this.checked) {
            showHeatmap();
        } else {
            hideHeatmap();
        }
    });


</script>
</html>



